<script setup lang="ts">
import { useUserStore } from '@/stores'
import { announcementPostAnnouncementService } from '@/api/announcement'
import { type Ref } from 'vue'

const userStore = useUserStore()
const message = useMessage()

const showModal = ref(false)
const handleShowModal = () => {
  showModal.value = true
}

type FormModel = {
  id: number
  content: string
}
const formModel: Ref<FormModel> = ref({
  id: userStore.userInfo.id,
  content: ''
})

const formRef = ref()
const handleAdd = async () => {
  console.log(formModel.value)
  await formRef.value.validate()
  const res = await announcementPostAnnouncementService(formModel.value)
  message.success('发布成功')
  showModal.value = false
  emit('update:show')
}
const emit = defineEmits(['update:show'])
const rules = {
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
}
defineExpose({ handleShowModal })
</script>

<template>
  <NModal
    v-model:show="showModal"
    class="custom-card"
    preset="card"
    title="公告发布"
    style="width: 500px"
    :bordered="false"
  >
    <n-form ref="formRef" :model="formModel" :rules="rules">
      <n-form-item path="content">
        <n-input type="textarea" placeholder="请输入内容" v-model:value="formModel.content" />
      </n-form-item>
      <n-form-item>
        <n-button type="info" circle secondary block :onclick="handleAdd">发布</n-button>
      </n-form-item>
    </n-form>
  </NModal>
</template>

<style scoped></style>
